<template>
	<view id="app" :style="{ backgroundImage: `url( ${baseUrl}/uploads/uniapp_image/user/sqbg.png)`, }">
    <u-navbar title="" :bgColor="bgColor" leftIconColor="#fff" :autoBack="true" :titleStyle="{ color: '#FFF', fontSize: '32rpx' }"></u-navbar>

    <view class="middle">
      <view class="logo">
        <image class="logoimg" :src="`${baseUrl}${appInfo.logo}`" mode="scaleToFill"/>
        <view class="title">{{ appInfo.name }}</view>
        <view class="subtitle">安全便捷，真实有效</view>
      </view>
      <view class="content">
        <button class="WXsubmit submit" @tap="thirdLogin('wechat')"> 快捷登录 </button>
        <!-- 公众号|App微信登录 -->
				<button v-if="['WechatOfficialAccount', 'App'].includes(sheep.$platform.name) && sheep.$platform.isWechatInstalled" @tap="thirdLogin('wechat')" class="ss-reset-button auto-login-btn">
					<image class="auto-login-img" :src="sheep.$url.static('/assets/addons/shopro/uniapp/platform/wechat.png')"></image>
				</button>

				<!-- iOS登录 -->
				<button v-if="sheep.$platform.os === 'ios' && sheep.$platform.name === 'App'" @tap="thirdLogin('apple')" class="ss-reset-button auto-login-btn">
					<image class="auto-login-img" :src="sheep.$url.static('/assets/addons/shopro/uniapp/platform/apple.png')"></image>
				</button>
        <!-- 勾选相关协议 -->
        <view class="agreement " :class="{ shake: currentProtocol }">
          <label class="radio" @tap="onChange">
            <radio @tap.stop="onChange" :checked="state.protocol" class="is-checked"
              color="#0038F7" />
            <view>我已阅读并遵守<text @tap.stop="onProtocol(appInfo.user_protocol.id, appInfo.user_protocol.title)">
                《{{ appInfo.user_protocol.title }}》</text>和<text @tap.stop="onProtocol(appInfo.privacy_protocol.id, appInfo.privacy_protocol.title)">
                《{{ appInfo.privacy_protocol.title }}》</text></view>
          </label>
        </view>
      </view>
    </view>
	</view>
  <u-popup :show="popupshow" mode="bottom"  :round="16"  @close="close" :closeOnClickOverlay="false">
    <mpAuthorization  @closepop="closepop"/>
  </u-popup>
  </template>
  
  <script setup>
  import { baseUrl } from '@/sheep/config';
  import { ref,reactive,computed } from 'vue';
  import sheep from '@/sheep';
  import mpAuthorization from './components/mp_authorization.vue';
  import { onLoad } from '@dcloudio/uni-app';
  onLoad((options) => {
    
  })
  const appInfo = computed(() => sheep.$store('app').info);
  // let corporationName = ref('中远直聘')
  const state = reactive({
      protocol: false,
    });
    function close(){
      popupshow.value = false
    } 
    function closepop(e){
      popupshow.value = e
    }
  const bgColor = ref('transparent')
  const popupshow = ref(false)
  // 查看协议
  function onProtocol(id, title) {
      sheep.$router.go('/pages/public/richtext', {
        id,
        title,
      });
    }

    //勾选协议
    function onChange() {
      state.protocol = !state.protocol;
    }
    const currentProtocol = ref(false);
  // 第三方授权登陆
  const thirdLogin = async (provider) => {
  if (!state.protocol) {
        // TODO：协议div晃动效果s
        currentProtocol.value = true;
        setTimeout(() => {
          currentProtocol.value = false;
        }, 1000);
        sheep.$helper.toast('请勾选相关协议');
        return;
      }
  const loginRes = await sheep.$platform.useProvider(provider).login();
  if (loginRes) {
    popupshow.value = false
    const userInfo = await sheep.$store('user').getInfo();
    uni.$emit('getUserInfo', userInfo)
    
    // 触发小程序授权信息弹框
    // #ifdef MP-WEIXIN
    if (userInfo.third_oauth.length > 0) {
      const mpThirdOauthInfo = userInfo.third_oauth.find((item) => item.platform === 'miniProgram');
      if (mpThirdOauthInfo && !mpThirdOauthInfo.nickname) {
        popupshow.value = true

      }
    }
    // #endif
  }
  };
</script>
  <style lang="scss">
  page {
	width: 100%;
	height: 100%;
  }
  
  #app {
	background-size: 100%;
	width: 100%;
	min-height: 100%;
	background-repeat: no-repeat;
	background-attachment: fixed;
  background-color: $uni-bg-color;
  
  }
  .middle{
    width: 100%;
    position: fixed;
    top: 25%;
    z-index: 2;
    .logo{
      // width: 36%;
      margin: 0 auto;
      text-align: center;
      .logoimg{
        width: 264rpx;
        height: 264rpx;
      }
      .title{
        font-family: PingFangSC;
        color: $uni-text-color;
        font-weight: $uni-font-weight;
        font-size: 54rpx;
        margin: -26rpx 0 20rpx 0;
      }
      .subtitle{
        opacity: 0.3;
font-family: PingFangSC;
color: $uni-text-color;
font-weight: 500;
font-size: 30rpx;
      }
    }
  }
    .content{
      width: 90%;
      margin: 30% auto 0 auto; 
      .submit{
        width: 100%;
	  height: 88rpx;
	  color: $uni-bg-color;
	  font-family: PingFangSC;
	  color: #FFFFFF;
	  font-weight: 500;
	  font-size: $uni-font-size-big;
	  padding: 0;
	  margin: 28rpx 0 40rpx 0;
	  border-radius: 50px;
	  background: linear-gradient(90deg, rgba(0, 56, 247, 1) 0%, rgba(77, 139, 255, 1) 100%);
	  border: none;
      }
    }
    .agreement {
	font-family: PingFangSC;
	color: #999;
	font-weight: 500;
	font-size: 26rpx;
  
	.radio {
	  display: flex;
	  justify-content: center;
  
	  view {
		margin-left: 50rpx;
  
		text {
		  color: $uni-color-primary;
		}
	  }
  
	  .is-checked {
		width: 8rpx;
		height: 8rpx;
    transform:scale(0.6);
    color: $uni-color-primary;
	  }
	}
  }
  .shake {
	animation: shake 0.05s linear 4 alternate;
}
@keyframes shake {
	from {
		transform: translateX(-10rpx);
	}

	to {
		transform: translateX(10rpx);
	}
}
:deep(.u-icon__icon){
  background: #a5b2c0;
  width: 64rpx;
  height: 64rpx;
  justify-content: center;
  border-radius: 50%;
  
}
.popform {
  :deep(.uni-easyinput__content){
  width: 478rpx !important;
    height: 100rpx !important;
    border-radius: 16px;
  background-color: #F4F6FA !important;
 }

}

  </style>